<template>
  <div class="public">
    <header>
      归档
      <br />
      共计{{ total }}篇
    </header>

    <main>
      <ul>
        <li v-for="item in list" :key="item.id">{{ item.title }}</li>
      </ul>
    </main>
  </div>
</template>

<script setup>
import { apiArticle } from "@/api/article";
import { onMounted, ref } from "vue";

const page = ref({
  current: 1,
  size: 999,
});

const total = ref(0);

const list = ref([]);

const getList = () => {
  apiArticle(page.value).then((res) => {
    list.value = res.data;

    total.value = res.total;
  });
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
header {
  text-align: center;
  margin-top: 10px;
  background: #fff;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid #e7eaee;
}

main {
  background: #fff;
  flex: 1;
}
</style>
